<template>
  <div class="hallManagement h100">
    <div class="PageContent">
      <div class="tablelist">
        <el-row style="text-align: left;line-height: 5em;">
          <el-button type="primary" plain v-if="btnRight.btnHallManagementAdd"  @click="addHall()">添加</el-button>
          <el-button type="primary" v-if="btnRight.btnHallManagementEdit" @click="modifyHall()">修改</el-button>
          <el-button type="danger"  v-if="btnRight.btnHallManagementDelete" @click="removeHall()">删除</el-button>
        </el-row>
        <el-table
          ref="hallTable"
          :data="tableHallData" :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          border
          stripe
          @row-click="handleRowClick"
          @select="select" @select-all="selectAll"
          style="width: 100%;height:calc(100% - 120px);overflow-y: scroll">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            property="hallCode"
            label="礼厅编号"
            align='center'
            width="120">
          </el-table-column>
          <el-table-column
            property="hallName"
            label="礼厅名称"
            align='center'
            width="120">
          </el-table-column>
          <el-table-column
            property="hallType"
            label="礼厅类型"
            align='center'
            width="120">
          </el-table-column>
          <el-table-column
            align='center'
            label="允许用途"
            width="150">
            <template slot-scope="{row,$index}">
              <p v-if="row.asWake && row.asFarewell">
                <span>守灵厅、告别厅</span>
              </p>
              <p v-else-if="row.asWake && !row.asFarewell">
                <span>守灵厅</span>
              </p>
              <p v-else-if="!row.asWake && row.asFarewell">
                <span>告别厅</span>
              </p>
              <p v-else>
                <span>&nbsp;</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column
            property="ruleItems"
            align='center'
            label="告别厅收费规则">
            <template slot-scope="{row,$index}">
              <div v-if="row.asFarewell" v-for="(item, index) in row.ruleItems" :key="index">
                <p style="width: 100%;" v-if="item.purpose.indexOf('告别')>-1">
                  <span>用途:【{{ item.purpose }}】</span>，
                  <span>单价:【{{ item.itemPrice }}】</span>，
                  <span>{{ item.ruleType }}</span>，
                  <span>{{ item.ruleDescribe }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            property="ruleItems"
            align='center'
            label="守灵厅收费规则">
            <template slot-scope="{row}">
              <div v-if="row.asWake" v-for="(item, index) in row.ruleItems" :key="index">
                <p style="width: 100%;" v-if="item.purpose.indexOf('守灵')>-1">
                  <span>用途:【{{ item.purpose }}】</span>，
                  <span>单价:【{{ item.itemPrice }}】</span>，
                  <span>{{ item.ruleType }}</span>，
                  <span>{{ item.ruleDescribe }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align='center'
            label="状态"
            width="120">
            <template slot-scope="{row,$index}">
              <p v-if="row.disableState==0">
                <span>有效可用</span>
              </p>
              <p v-else-if="row.disableState==1">
                <span>无效禁用</span>
              </p>
              <p v-else-if="row.disableState==3">
                <span>维修</span>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <el-dialog title="礼厅信息维护" :visible.sync="dialogVisibleHall" width="700px" v-dialogDrag border>
      <el-form :model="saveHallData.hall" class="saveform" :rules="rules" ref="halldialog" :inline="true"
               label-width="120px" >
        <el-row :gutter="5">
          <el-form-item label="礼厅编号:" prop="hallCode">
            <el-input v-model="saveHallData.hall.hallCode" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="礼厅名称:" prop="hallName">
            <el-input v-model="saveHallData.hall.hallName" maxlength="50"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="礼厅类型:" prop="hallTypeCode">
            <el-select v-model="saveHallData.hall.hallTypeCode" @change="hallTypeChange(saveHallData.hall.hallTypeCode)"
                       placeholder="请选择">
              <el-option
                v-for="item in saveHallData.dicts.hall_type	"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState?true:false"/>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="saveHallData.hall.disableState" onkeydown="return (event.keyCode!=8)" placeholder="请选择">
              <el-option
                v-for="item in disableState"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5" class="saveform">
          <el-form-item label="允许用途:">
            <el-checkbox label="守灵厅" v-model="purposeCheck.asWake" @change="purposeChange(purposeCheck.asWake,purposeCheck.asFarewell)"></el-checkbox>
            <el-checkbox label="告别厅" v-model="purposeCheck.asFarewell" @change="purposeChange(purposeCheck.asWake,purposeCheck.asFarewell)"></el-checkbox>
          </el-form-item>
        </el-row>
        <el-row :gutter="5" class="saveform">
          <el-form-item label="收费规则:">
            <div v-if="saveHallData.ruleItems" class="ruleItem">
              <p class="content" v-for="(item, index) in showRule" :key="index">
                <span>用途:【{{ item.purpose }}】</span>，
                <span>单价:【{{ item.itemPrice }}】</span>，
                <span>{{ item.ruleType }}</span>，
                <span>{{ item.ruleDescribe }}</span>
              </p>
            </div>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="描述:" prop="hallDescribe">
            <el-input type="textarea" style="width:520px;" v-model="saveHallData.hall.hallDescribe" ></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:">
            <el-input type="textarea" style="width:520px;" v-model="saveHallData.hall.remark"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="排序:" prop="sort">
            <el-input onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" v-model="saveHallData.hall.sort"  maxlength="11" style="width:520px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button type="primary" v-if="btnRight.btnHallManagementSave" @click="saveHall()" >保存</el-button>
        <el-button type="primary" plain v-if="btnRight.btnHallManagementCancel" @click="dialogVisibleHall = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as API from '@/api/systemApplication'

  export default {
    name: "hallManagement",
    data() {
      return {
        rules: {
          hallCode: [
            {required: true, message: '请输入', trigger: 'blur'},
          ],
          hallName: [
            {required: true, message: '请输入', trigger: 'blur'},
          ],
          hallTypeCode: [
            {required: true, message: '请选择', trigger: 'change'},
          ],
          hallDescribe:[
            {required: false, message: '请选择', trigger: 'change'},
            { min: 0, max: 50, message: '文字长度在 0 到 50 个字符' ,trigger: 'blur'}
          ]
        },
        tableSelection: [],
        //**礼厅数据**//
        tableHallData: [],
        showRule: [], //根据车辆类型选择显示相应规则
        purpose: [],
        purposeCheck: {asWake: true, asFarewell: true},// 用途选择
        saveHallData: {
          "hall": {
            "id": 0,
            "hallCode": "string",
            "hallName": "string",
            "hallTypeCode": 0,
            "disableState": 0,
            "asWake": 0,
            "asFarewell": 0,
            "hallDescribe": "string",
            "remark": "string",
            "sort": 0,
            "version": 0
          },
          "dicts": {
            "mourn_ceremony_hall": [
              {
                "dataCode": 0,
                "dataText": "string",
                "dataTextAbbr": "string",
                "disableState": 0,
                "asDefault": 0
              }
            ]
          },
          "ruleItems": []
        },
        disableState: [
          {label: "有效可用", value: 0}, {label: "无效禁用", value: 1}, {label: "维修", value: 3}
        ],
        dialogVisibleHall: false,    //礼厅对话框
        saveFlagHall: false,         //礼厅保存标志
        onpresscTime:0,  //  阻止短时间内连续点击
        modify: false,               //修改标
        btnRight: {
          btnHallManagementAdd: true, //添加
          btnHallManagementEdit: true,//修改
          btnHallManagementDelete: true,//删除
          btnHallManagementSave: true,//保存
          btnHallManagementCancel: true,//取消
        }
        //**礼厅数据结束**//
      }
    },
    mounted() {
      this.loadHallListData();
      //载入按钮
      this.btnRight = this.$route.meta.buttons;//mounted(){}
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (let key of Object.keys(this.btnRight)) {
        this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
      }
    },
    methods: {
      //点击行触发，选中或不选中复选框
      handleRowClick(row, column, event) {
        if (this.tableSelection.length > 0) {
          this.$refs.hallTable.toggleRowSelection(this.tableSelection[0], false);
        }
        this.$refs.hallTable.toggleRowSelection(row);
        this.tableSelection = [row]
      },
      select(selection, row) {
        // 选择项大于1时
        if (selection.length > 1) {
          let del_row = selection.shift();
          // console.log('把数组的第一个元素从其中删除后', selection);
          this.$refs.hallTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        }
        this.tableSelection = selection
      },
      selectAll(selection) {
        if (selection.length > 1) {
          selection.length = 1;
        }
        this.tableSelection = selection
      },
      /**********************礼厅方法**********************/
      //table中类型添加
      addHall() {
        this.purpose = [];
        this.showRule = []
        this.modify = false;
        //this.purposeCheck.asWake = false;
        this.saveHallData.hall = {
          "id": 0,
          "carCode": "",
          "carNo": "",
          "carTypeCode": "",
          "driverUserId": "",
          "carBelongCode": "",
          "disableState": 0,
          "sort": "",
          "remark": "",
          "version": 0
        }
        let postData = {
          "id": null,
          "dictTypeCodes": [
            "hall_type"
          ]
        }
        API['loadHallWithId'](postData).then(response => {
          const {data} = response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.dicts) {
            this.saveHallData.dicts = data.dicts;
          }
          if (data.ruleItems) {
            this.saveHallData.ruleItems = data.ruleItems;
          }
          if (data.users) {
            this.saveHallData.users = data.users;
          }
          this.showRule = []
          if (this.saveHallData.hall.hallTypeCode) {
            this.saveHallData.ruleItems.forEach(item => {
              if (item.dataCode == this.saveHallData.hall.hallTypeCode) {
                this.showRule.push(item)
              }
            })
          }
          this.purposeCheck.asWake = false
          this.purposeCheck.asFarewell = false
          this.dialogVisibleHall = true
        }).catch(error => {
          this.$message(error);
        })
        this.dialogVisibleHall = true

      },

      //table中类型修改
      modifyHall() {
        this.modify = true;
        let data = this.tableSelection
        if (data.length == 0) {
          this.$message("未选中礼厅")
          return
        }
        let postData = {
          "id": data[0].id,
          "dictTypeCodes": [
            "hall_type"
          ],
        }
        API['loadHallWithId'](postData).then(response => {
          const {data} = response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.hall) {
            this.saveHallData.hall = data.hall;
          }
          if (data.dicts) {
            this.saveHallData.dicts = data.dicts;
          }
          if (data.ruleItems) {
            this.saveHallData.ruleItems = data.ruleItems;
          }

          this.purposeCheck.asWake = this.saveHallData.hall.asWake == 1
          this.purposeCheck.asFarewell = this.saveHallData.hall.asFarewell == 1

          this.showRule = []
          if ((this.purposeCheck.asWake || this.purposeCheck.asFarewell) && this.saveHallData.hall.hallTypeCode) {
            this.saveHallData.ruleItems.forEach(item => {
              if (item.dataCode == this.saveHallData.hall.hallTypeCode) {
                if (this.purposeCheck.asWake && item.purpose.indexOf("守灵")>-1){
                  this.showRule.push(item)
                }
                if (this.purposeCheck.asFarewell && item.purpose.indexOf("告别")>-1){
                  this.showRule.push(item)
                }
              }
            })
          }

          this.dialogVisibleHall = true
        }).catch(error => {
          this.$message(error)
        })
      },
      //table中服务物品类型删除
      removeHall() {
        let data = this.tableSelection
        if (data.length == 0) {
          this.$message("未选中礼厅")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = [
            {
              "id": data[0].id,
              "version": data[0].version
            }
          ]
          API['deleteHallWithId'](postData).then(response => {
            const {message} = response;
            this.tableSelection =[]
            this.$message(message)
            this.loadHallListData();
          }).catch(error => {
            this.$message(error)
          })

        }).catch(() => {
          //几点取消的提示
        });
      },

      //加载列表
      loadHallListData() {
        let postData = {}
        API['loadHallList'](postData).then(response => {
          const {data} = response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          this.tableHallData = data

        }).catch(error => {
          this.$message(error)
        })
      },


      //类型改变后加载用途（守灵，告别）
      hallTypeChange(id) {
        let shouL=false,gaoB=false
        this.purpose = []
        if (id) {
          this.saveHallData.ruleItems.forEach(item => {
            if (item.dataCode == id) {
              // if (this.purpose.indexOf(item.purpose) == -1) {
                // this.purpose.push(item.purpose)
                if (!shouL) {
                  shouL = item.purpose.indexOf('守灵') > -1
                }
                if (!gaoB){
                  gaoB = item.purpose.indexOf('告别') > -1
                }
              // }
            }
          })
          //this.purposeCheck.asWake = shouL
          //this.purposeCheck.asFarewell = gaoB
            this.showRule = []
          if (shouL || gaoB) {
            if (this.saveHallData.hall.hallTypeCode) {
              this.saveHallData.ruleItems.forEach(item => {
                if (item.dataCode == this.saveHallData.hall.hallTypeCode) {
                  if (this.purposeCheck.asWake && item.purpose.indexOf("守灵")>-1){
                    this.showRule.push(item)
                  }
                  if (this.purposeCheck.asFarewell && item.purpose.indexOf("告别")>-1){
                    this.showRule.push(item)
                  }
                }
              })
            }
          }
        }
      },


      //复选框改变
      purposeChange(asWake,asFarewell) {
        this.showRule = []
        if ((asWake || asFarewell) && this.saveHallData.hall.hallTypeCode) {
          this.saveHallData.ruleItems.forEach(item => {
            if (item.dataCode == this.saveHallData.hall.hallTypeCode) {
              if (this.purposeCheck.asWake && item.purpose.indexOf("守灵")>-1){
                this.showRule.push(item)
              }
              if (this.purposeCheck.asFarewell && item.purpose.indexOf("告别")>-1){
                this.showRule.push(item)
              }
            }
          })
        }
      },

      //保存信息
      saveHall() {
        if ((Date.now() - this.onpresscTime) > 2000) {
          this.onpresscTime = Date.now()
          console.log(Date.now())
        }else{
          return
        }
        this.$refs.halldialog.validate(valid=>{
          if (valid) {
            this.saveHallData.hall.asWake = this.purposeCheck.asWake ? 1 : 0;
            this.saveHallData.hall.asFarewell = this.purposeCheck.asFarewell ? 1 : 0;

            if (this.saveHallData.hall.asWake != 1 && this.saveHallData.hall.asFarewell != 1) {
              this.$message("必须选择一种允许用途")
              return;
            }

            this.saveFlagHall = true

            let postData = this.saveHallData.hall
            API['saveHall'](postData).then(response => {
              const {message} = response;
              this.$message(message)
              this.loadHallListData()
              this.dialogVisibleHall = false
              this.saveFlag = false;
            }).catch(error => {
              this.$message(error)
              this.saveFlag = false;
            })
          }
        })


      }, //验证整数
      onlySortNumber(){
        // 先把非数字的都替换掉，除了数字和.
        let obj=this.saveHallData.hall.sort;
        obj=Number.parseInt(obj);
        this.saveHallData.hall.sort=obj;
      }
      /**********************礼厅方法**********************/

    },
    watch: {
      "dialogVisibleHall"() {
        if (this.dialogVisibleHall == false) {
          this.purpose = []
          this.showRule = []
          this.purposeCheck.asWake = true
          this.purposeCheck.asFarewell = true
          this.$nextTick(() => {
            this.$refs.halldialog.resetFields();
          })
        }
      }
    }
  }
</script>

<style scoped>
  .content {
    width: 500px;
    display: inline-block;
  }

  .ruleItem {
    width: 532px;
    max-height: 6em;
    overflow-y: auto;
    line-height: 1.5em;
  }

  .ruleItem .content {
    width: 100%;
    padding-top: 10px;
  }
</style>
